import { ref, computed, watch } from 'vue'
import { defineStore } from 'pinia'
import router from '../router'
import { getadcode } from '@/api'
export const useWeatherStore = defineStore('weather', () => {
  const weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  const thisWeather = ref(404)
  const fourDayWeather = ref(404)
  const searchDayWeather = ref('')
  const searchWeatherData = ref([])
  const isShowTip = ref(false)
  const weatherReady = ref(false)
  const cityStr = ref('')
  const cityNameResolved = ref('')
  const info = ref(null)
  const cityName = computed({
    // eslint-disable-next-line vue/return-in-computed-property
    get: async () => {
      if (cityStr.value == '') {
        return ''
      } else {
        const res = await getadcode(cityStr.value)
        if (res === 404) {
          return '对不起网络似乎除了点问题 请稍后再查询'
        } else if (res) {
          adcode.value = res.adcode
          if (res.city.length > 0) {
            return res.city
          } else {
            return res.province
          }
        } else {
          return '似乎没有找到你查找的城市'
        }
      }
    },
    // eslint-disable-next-line no-unused-vars
    set: (value) => {}
  })
  const cityList = ref([])
  const adcode = ref('')
  const thisoption = ref({})
  const searchoption = ref({})
  const day = computed(() => {
    return (index) => {
      index = +index
      let i = new Date().getDay()
      if (i === 0) {
        i = 7
      }
      if (index === i) {
        return '今天'
      } else if (index === (i + 1 > 7 ? 1 : i + 1)) {
        return '明天'
      } else {
        return weekList[index - 1]
      }
    }
  })
  const renderChart = (value) => {
    const data1 = value.map((item) => {
      return {
        name: '白',
        value: +item.daytemp
      }
    })
    const data2 = value.map((item) => {
      return {
        name: '晚',
        value: +item.nighttemp
      }
    })
    const option = {
      xAxis: {
        type: 'category',
        show: false
      },
      yAxis: {
        type: 'value',
        show: false
      },
      grid: {
        top: 20,
        left: 0,
        right: 0,
        bottom: 0
      },
      series: [
        {
          type: 'line',
          data: data1,
          // stack: 'Total',
          label: {
            show: true,
            formatter: (params) => {
              return params.name + params.value + '°C'
            },
            color: '#fff'
          }
        },
        {
          type: 'line',
          data: data2,
          // stack: 'Total',
          label: {
            show: true,
            formatter: (params) => {
              return params.name + params.value + '°C'
            },
            distance: -25,
            color: '#fff'
          }
        }
      ]
    }
    return option
  }
  const handleWeather = (adcode, city, index = null) => {
    cityStr.value = ''
    router.push({
      name: 'city',
      params: {
        adcode: adcode
      },
      query: {
        search: city
      }
    })
    if (index != null) {
      cityList.value[index].isMoved = false
    }
  }
  const addCity = (city, adcode, tem) => {
    console.log('addcity', city, adcode, tem)
    cityList.value.push({
      city: city,
      adcode: adcode,
      tem: tem,
      isMoved: false
    })
  }
  const removeCity = (index) => {
    cityList.value.splice(index, 1)
  }

  watch(cityName, async (val) => {
    cityNameResolved.value = ''
    cityNameResolved.value = await val
  })
  watch(
    cityList,
    () => {
      localStorage.setItem('cityList', JSON.stringify(cityList.value))
    },
    { deep: true }
  )
  const clickShowTip = () => {
    isShowTip.value = true
  }
  const clickCloseTip = () => {
    isShowTip.value = false
  }
  const clickOutside = (e) => {
    if (!info.value.contains(e.target)) {
      isShowTip.value = false
    }
  }
  return {
    day,
    adcode,
    thisWeather,
    fourDayWeather,
    isShowTip,
    cityStr,
    cityName,
    cityList,
    cityNameResolved,
    thisoption,
    searchoption,
    searchWeatherData,
    searchDayWeather,
    weatherReady,
    info,
    renderChart,
    handleWeather,
    addCity,
    removeCity,
    clickShowTip,
    clickCloseTip,
    clickOutside
  }
})
